<!-- 统一样式 标题 -->
<template>
  <div
    :class="[
      'title-box',
      titleNeedHandle ? 'tool-handle' : '',
      bothSidesNoPadding ? 'both-sides-no-padding' : '',
      noPaddingTop ? 'no-padding-top' : '',
    ]"
    :style="dynamicStyle"
  >
    <span v-if="titleName" :class="['title', 'title-' + size]">
      <slot name="title">
        {{ titleName }}
      </slot>
    </span>
    <div v-if="slots.tools" class="box-tools">
      <slot name="tools" />
    </div>
    <div v-if="slots.content" class="box-content">
      <slot name="content" />
    </div>
  </div>
  <div v-if="slots.footer" class="box-footer">
    <slot name="footer" />
  </div>
</template>
<script>
export default {
  name: "MyTitle",
};
</script>
<script setup>
import { useSlots, computed } from "vue";
const slots = useSlots();
const props = defineProps({
  titleName: {
    type: [Number, String],
    default: "标题", // 标题默认值
  },
  titleNeedHandle: {
    type: Boolean,
    default: false, // 是否需要处理标题
  },
  bothSidesNoPadding: {
    type: Boolean,
    default: false, // 是否两侧无边距
  },
  noPaddingTop: {
    type: Boolean,
    default: false, // 顶部是否无边距
  },
  size: {
    // medium / small / mini
    type: String,
    default: "medium", // 默认大小
  },
  titleStyle: {
    type: Object,
    default: () => {}, // 标题样式
  },
});

// 动态样式
const dynamicStyle = computed(() => {
  return slots.content
    ? { ...props.titleStyle, backgroundColor: "#ffff" }
    : props.titleStyle;
});
</script>

<style lang="scss" scoped>
.title-box {
  position: relative;
  /* padding: 10px 10px 10px;
  margin: 5px 0; */

  .title {
    position: relative;
    padding-left: 10px;
    font-weight: 700;
    color: #000;
    font-size: 16px;

    // line-height: 1;
    &::before {
      position: absolute;
      content: "";
      left: 0px;
      top: 0;
      width: 6px;
      border-radius: 3px;
      height: 20px;
      background-color: #1b65b9;
    }
  }

  .title-medium {
    font-size: 16px;

    &::before {
      width: 6px;
      height: 20px;
    }
  }

  .title-small {
    font-size: 14px;

    &::before {
      width: 5px;
      height: 18px;
    }
  }

  .title-mini {
    font-size: 12px;

    &::before {
      width: 4px;
      height: 16px;
    }
  }

  .box-tools {
    position: absolute;
    top: 5px;
    right: 10px;
  }
}

.tool-handle {
  min-height: 50px;
  height: auto;
  padding: 10px;
  line-height: 50px;
}

.both-sides-no-padding {
  padding-left: 0;
  padding-right: 0;
}

.no-padding-top {
  padding-top: 0px;
}

.box-content {
  margin-top: 12px;
}
</style>
